<template>
  <div class="musicplayer">
    <!-- 播放歌曲信息状态 -->
    <div class="play_info" v-show="showPlayInfo">
      <div class="img">
        <!-- getNowMusicMenu.al.picUrl -->
        <img :src="getNowMusicMenu.al.picUrl" />
        <!-- 遮布 -->
        <div class="tilt" @click="showTilt">
          <span class="el-icon-top-right"></span>
          <span class="el-icon-bottom-left"></span>
        </div>
      </div>
      <div class="info">
        <!-- {{ getNowMusicMenu.name || getNowMusicMenu.al.name }} -->
        <span class="name">{{ getNowMusicMenu.name || getNowMusicMenu.al.name }}</span>
        <!-- {{ getNowMusicMenu.ar[0].name }} -->
        <span><a>{{ getNowMusicMenu.ar[0].name }}</a></span>
      </div>
    </div>
    <!-- 播放控件 -->
    <div class="player_container">
      <!-- 播放按钮 -->
      <div class="play">
        <div class="play_btn">
          <!-- 上一首 -->
          <i class="iconfont icon-skip-previous-circle" @click="preMusic"></i>
          <!-- 播放与暂停 -->
          <div class="start" @click="play">
            <i class="iconfont icon-play" v-show="!isPlaying"></i>
            <i class="iconfont icon-pause-circle" v-show="isPlaying"></i>
          </div>
          <!-- 下一首 -->
          <i class="iconfont icon-skip-next-circle" @click="nextMusic"></i>
        </div>
      </div>
      <!-- 播放进度条 -->
      <div class="play_progress">
        <span>{{ startTime }}</span>
        <el-slider v-model="musicDuration" :max="totalDuration" @change="musicDurationChange"></el-slider>
        <span>{{ finallyTime }}</span>
      </div>
      <!-- 音量 -->
      <div class="play_volume">
        <i :class="mute === true ? 'iconfont icon-volume-up' : 'iconfont icon-volume-mute'" @click="muteChange"></i>
        <el-slider v-model="volumeValue" @change="volumeChange"></el-slider>
        <i class="iconfont icon-history" @click="showCard"></i>
      </div>
      <audio :src="getNowMusic" autoplay ref="audio"></audio>
    </div>
    <!-- 历史播放列表 -->
    <el-card class="box-card" v-show="showCardValue">
      <div slot="header" class="clearfix">
        <span>历史记录</span>
      </div>
      <div>列表内容</div>
    </el-card>
  </div>
</template>

<script>
import { getMusicUrl, getMusicMenu, getMusicLyric } from '../../network/swiper.js'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      musicUrl: '',
      isPlaying: false,
      // 播放进度值
      musicDuration: 0, // 音乐当前播放时间
      totalDuration: 100, // 总时长 默认先给个100
      startTime: '00 : 00',
      finallyTime: '00 : 00',
      // 音量值
      volumeValue: 100,
      // 暂停前的音量值
      pauseVolumeValue: 0,
      // 控制是否静音
      mute: true,
      // 历史播放列表的显示与隐藏
      showCardValue: false,
      showPlayInfo: false,
      isShowTilt: false
    }
  },
  methods: {
    // 显示歌词页面
    showTilt () {
      this.isShowTilt = true
      this.$store.commit('setShowTilt', this.isShowTilt)
    },
    showCard () {
      this.showCardValue = !this.showCardValue
    },
    // 切换上一首
    preMusic () {
      if (this.getMusicIndex - 1 < 0) return
      this.$store.commit('subMusicIndex')
      // console.log(this.getMusicIndex)
      this.getMusicUrl(this.getMusicListIds[this.getMusicIndex])
      this.getMusicMenu(this.getMusicListIds[this.getMusicIndex])
      this.getMusicLyric(this.getMusicListIds[this.getMusicIndex])
    },
    // 播放
    play () {
      if (this.getNowMusic !== '') {
        if (!this.$refs.audio.paused) {
          this.$refs.audio.pause()
        } else {
          this.$refs.audio.play()
        }
        this.isPlaying = !this.isPlaying
        this.$store.commit('playStatus', this.isPlaying)
      }
    },
    // 切换下一首
    nextMusic () {
      if (this.getMusicIndex + 1 > this.getMusicCount) return
      this.$store.commit('addMusicIndex')
      // console.log(this.getMusicIndex)
      this.getMusicUrl(this.getMusicListIds[this.getMusicIndex])
      this.getMusicMenu(this.getMusicListIds[this.getMusicIndex])
      this.getMusicLyric(this.getMusicListIds[this.getMusicIndex])
    },
    getMusicUrl (id) {
      getMusicUrl(id).then(res => {
        // console.log(res.data.data[0].url)
        this.$store.commit('getNowMusic', res.data.data[0].url)
      })
    },
    getMusicMenu (id) {
      getMusicMenu(id).then(res => {
        this.$store.commit('getnowMusicMenu', res.data.songs[0])
      })
    },
    getMusicLyric (id) {
      getMusicLyric(id).then(res => {
        // console.log(res.data)
        if (res.data.lrc !== undefined) {
          this.$store.commit('setLyric', res.data.lrc.lyric)
        }
      }, err => {
        console.log(err)
      })
    },
    // 播放进度值改变
    musicDurationChange () {
      const audio = this.$refs.audio
      audio.currentTime = this.musicDuration
      audio.addEventListener('timeupdate', () => {
        // 总时长
        var time = audio.duration
        this.totalDuration = time
        this.finallyTime = this.transform(time)
        // 获取歌曲时间
        this.musicDuration = audio.currentTime
        this.startTime = this.transform(audio.currentTime)
        if (this.startTime === this.finallyTime) {
          this.isPlaying = false
        }
      })
    },
    // 控制音量
    volumeChange () {
      const audio = this.$refs.audio
      audio.volume = this.volumeValue / 100
      this.$store.commit('setVolume', this.volumeValue)
    },
    muteChange () {
      this.mute = !this.mute
      if (this.mute === false) {
        this.pauseVolumeValue = this.volumeValue
        this.$refs.audio.volume = 0 / 100
        this.volumeValue = 0
      } else {
        // 静音后在开启音量恢复到静音前的音量
        this.volumeValue = this.pauseVolumeValue
        this.$refs.audio.volume = this.volumeValue / 100
      }
    },
    // 对时间进度的封装
    transform (time) {
      var minutes = parseInt(time / 60)
      if (minutes < 10) {
        minutes = '0' + minutes
      }
      var seconds = Math.round(time % 60)
      if (seconds < 10) {
        seconds = '0' + seconds
      }
      return minutes + ' : ' + seconds
    }
  },
  computed: {
    ...mapGetters(['getNowMusic', 'getNowMusicMenu', 'getMusicListIds', 'getMusicIndex', 'getMusicCount', 'getVolumeValue', 'getIsPlay'])
  },
  watch: {
    getNowMusic () {
      // console.log(this.getMusicListIds)
      this.isPlaying = true
      this.volumeValue = this.getVolumeValue
      this.$store.commit('playStatus', this.isPlaying)
      if (this.isPlaying) {
        this.musicDurationChange()
      }
      this.showPlayInfo = true
      // 获取歌曲歌词
      // console.log(this.getMusicListIds[this.getMusicIndex])
      this.getMusicLyric(this.getMusicListIds[this.getMusicIndex])
    },
    isPlaying () {
      this.isPlaying = this.getIsPlay
      if (!this.isPlaying) {
        this.$refs.audio.pause()
      }
    },
    musicDuration (newVal, oldVal) {
      if (newVal === this.totalDuration) {
        if (this.getMusicIndex + 1 > this.getMusicCount) return
        this.$store.commit('addMusicIndex')
        // console.log(this.getMusicIndex)
        this.getMusicUrl(this.getMusicListIds[this.getMusicIndex])
        this.getMusicMenu(this.getMusicListIds[this.getMusicIndex])
      }
    }
  },
  created () {
    if (this.getNowMusic) {
      this.isPlaying = true
      this.volumeValue = this.getVolumeValue
      this.$store.commit('playStatus', this.isPlaying)
    }
    this.isPlaying = this.getIsPlay
  }
}
</script>

<style lang="less" scoped>
  .musicplayer {
    width: 100%;
    height: 7%;
    background-color: #e5e5ff;
    border-top: 1px solid #e1e1e2;
    box-sizing: border-box;
    // display: flex;
    // justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;

    .play_info {
      width: 18%;
      height: 80px;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      background-color: #e5e5ff;
      border-top: 1px solid #e1e1e2;
      position: fixed;
      bottom: 7%;
      left: 0;
      .info {
        width: 62%;
        .name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      div {
        width: 60px;
        height: 60px;
        margin: 0 10px;
        display: flex;
        flex-direction: column;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border: 1px solid #e1e1e2;
        }
        span {
          margin-top: 5px;
        }
        .tilt {
          display: none;
          position: absolute;
          // position: relative;
          top: 0;
          left: -10px;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.4);
          box-sizing: border-box;
          // position: sticky;
          span {
            width: 100%;
            color: #dedede;
            font-size: 28px;
            // width: 50%;
          }
          span:first-child {
            text-align: right;
            margin-top: 1px;
          }
        }
      }
      .img:hover .tilt {
        display: block;
      }
    }

    .player_container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
      overflow: hidden;
      .play {
        width: 18%;
        display: flex;
        justify-content: center;
        .play_btn {
          display: flex;
          align-items: center;
          i {
            font-size: 50px;
            color: #66b7ff;
          }
          div i {
            padding: 0 20px;
          }
        }
      }
      .play_progress {
        width: 50%;
        // margin-left: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .el-slider {
          width: 75%;
          margin: 0 15px;
          color: #babcb7;
        }
        span {
          padding: 5px;
        }
      }
      .play_volume {
        width: 30%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .el-slider {
          width: 30%;
          margin: 0 40px 0 15px;
        }
        i {
          font-size: 25px;
        }
        i:hover {
          color: #2d0000;
        }
      }
    }
  }

  .el-card {
    width: 20%;
    height: 300px;
    position: fixed;
    bottom: 7%;
    right: 10px;
  }
</style>
